<!-- 
 * 智能匹配对接管理
 * @author: 
 * @since: 2022-05-11
 * index.vue
-->
<template>
  <div class="h100">
    <router-view v-show="routerCutLevel === 3" class="detailsPage"></router-view>
    <div class="match-container listPage" v-show="routerCutLevel === 2">
      <div class="choice">
        <div class="title">匹配类型选择：</div>
        <el-radio-group v-model="radio">
          <el-radio :label="item.label" v-for="(item, index) in state.radioList" :key="index">{{ item.value }}</el-radio>
        </el-radio-group>
      </div>
      <div class="demand" v-if="radio == 1">
        <demandMate></demandMate>
      </div>
      <div class="achievement" v-if="radio == 2">
        <achievementMate></achievementMate>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const router = useRouter();
const store = useStore();

const state = reactive({
  radioList: [
    {
      label: 1,
      value: '需求匹配'
    },
    {
      label: 2,
      value: '成果匹配'
    },
  ],
})
const radio = ref(1)

const routerCutLevel = computed(() => {
  return store.getters['setting/routerCutLevel'];
});
watch(() => {
  if (router.currentRoute.value.params.type) {
    radio.value = Number(router.currentRoute.value.params.type)

  }

})



</script>

<style lang="scss" scoped>
.match-container {
  .choice {
    display: flex;
    align-items: center;
    padding: 20px 20px 0 20px;
    .title {
      color: #333333;
      font-weight: bold;
    }
  }
}
</style>
